<template>
    <div class="searchBox">
        <div class="search">
            <div>
                <van-search v-model="value" shape="round" background="##f1f1f2" placeholder="请输入商家、商品名称" />
            </div>
            <span @click="search(value)">搜索 </span>
            
        </div>
        <div class="history">
            <div>历史记录</div>
            <div @click="clear">
                <van-icon name="delete-o" />
            </div>
        </div>
        <div class="hisList">
            <div v-for="(item,index) in record" :key="index">{{item.name}}</div>
        </div>
        <div>搜索发现</div>
        <div class="hisList">
            <div v-for="(item,index) in found" :key="index">{{item}}</div>
        </div>
    </div>

</template>

<script>
import { shop_search } from '../../utils/api'
import { Toast } from 'vant';

export default {
    data() {
        return {
            value: '',
            record: [],
            found: ['麻辣烫', '米线', '匹萨', '蛋糕', '汉堡', '腊八粥', '烤肉拌饭', '炸鸡', '味多美(温阳路店)'],
        }
    },
    methods: {
        search(str) {
            shop_search({ searchkey: str }).then((res) => {
                if (res.data.list.length != 0) {
                    this.record.push()
                    this.record = res.data.list;
                    console.log(res);
                    // this.$router.push('/search/sclist')
                } else {
                    Toast('该商品不存在');
                }
            })
            // this.$router.push('/search/sclist')
            // if (this.record.length >= 0) {
            //     this.$router.push('/search/found')
            //     // console.log(11);
            // } 
            // console.log(this.record.length);
        },
        clear() {
            this.record = [];
        }
    }

}
</script>

<style lang="scss" scoped>
.searchBox{
.search {
        margin: 4px;
        display: flex;
        justify-content: space-between;

        div {
            width: 96%;
        }

        span {
            width: 12%;
            line-height: 54px;
            color: #1aafff;
        }
    }
    .history {
        display: flex;
        justify-content: space-between;
        margin: 6px 10px;
    }
    .hisList{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        div{
            background-color: #f3f3f3;
            border: 4px 6px;
            text-align: center;
            color: #424242;
            margin: 4px;
            border-radius: 4px;
        }
    }
}
</style>